<template>
  <section class="main" v-loading="resultObj.loading">
    <template v-if="locale == 'en'">
      <IndexEn :data="resultObj.data" />
    </template>
    <template v-else-if="locale == 'zh-cn'">
      <IndexZhcn :data="resultObj.data" />
    </template>
  </section>
</template>

<script lang="ts" setup name="HomePage">
  import { computed, onMounted } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { setLang } from '@/i18n';
  import { useI18n } from 'vue-i18n';
  import { goodsApi } from '@/api/index';
  import type { FormInstance, FormRules } from 'element-plus';
  import IndexEn from './components/index/en.vue';
  import IndexZhcn from './components/index/zh-cn.vue';

  const { locale } = useI18n();

  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const resultObj = reactive({
    data: [],
  });

  onMounted(() => {});

  watch(
    () => locale.value,
    () => {},
    { deep: true, immediate: true },
  );
</script>
<style lang="scss">
  .main {
    min-height: calc(100vh - 148px);
  }
</style>
